{block name="main"}
<ul class="nav nav-tabs v-nav-tabs add_tab1" role="tablist">
    <li role="presentation" class="active">
        <a href="#base_info" aria-controls="base_info" role="tab" data-toggle="tab" class="flex-auto-center"
           aria-expanded="false">基本信息</a>
    </li>
    <li role="presentation">
        <a href="#pay_info" aria-controls="pay_info" role="tab" data-toggle="tab" class="flex-auto-center"
           aria-expanded="false">支付信息</a>
    </li>
    <li role="presentation">
        <a href="#tem_info" aria-controls="tem_info" role="tab" data-toggle="tab" class="flex-auto-center"
           aria-expanded="false">模板信息</a>
    </li>
</ul>
<div class="tab-content pt-15">
    <div class="tab-pane fade tab-1 active in" id="base_info">
        <form class="form-horizontal form-validate-1 widthFixedForm">
            <div class="form-heading">基本信息</div>
            <div class="form-group">
                <label class="col-md-2 control-label">小程序名称</label>
                <div class="col-md-5">
                    <p class="form-control-static">
                        <span>{$base_info.nick_name}</span><a href="{$auth_url}" class="text-primary pl-15">重新授权</a>
                        <a href="javascript:void(0);" class="text-primary pl-15" id="refresh_base">刷新基本信息</a>
                    </p>
                </div>
            </div>
            <div class="form-group">
                <label class="col-md-2 control-label">小程序头像</label>
                <div class="col-md-5">
                    <img src="{$base_info.head_img}" width="60" height="60">
                </div>
            </div>

            <div class="form-group">
                <label class="col-md-2 control-label">微信认证</label>
                <div class="col-md-5">
                    {switch name="base_info.real_name_status"}
                    {case value="0"}<p class="form-control-static">已认证</p>{/case}
<!--                    {case value="1"}<p class="form-control-static">未认证</p>{/case}-->
<!--                    {case value="3"}<p class="form-control-static">实名验证失败</p>{/case}-->
                    {default /}<p class="form-control-static">未认证</p>
                    {/switch}
                </div>
            </div>

            <div class="form-group">
                <label class="col-md-2 control-label">服务类目</label>
                <div class="col-md-8">
                    <select name="" class="form-control" id="category">
                        {volist name='base_info.category_array' id='vo'}
                        <option class="form-control-static" value="{$vo.second_id}">
                            {$vo.first_class} -> {$vo.second_class}
                        </option>
                        {/volist}
                    </select>
                    <div class="mb-0 help-block">小程序将以当前选中类目发布，如果找不到想要的服务类目，请先到微信公众平台 “基本设置”中添加服务类目，再回到此页面。</div>
                </div>
<!--                todo... 调用接口刷新返回-->
<!--                <div class="col-md-2" style="width: 100px;margin-top: 8px;"><a href="javascript:void(0);" class="text-primary" id="refresh">刷新类目</a></div>-->
            </div>
            <div class="form-group">
                <label class="col-md-2 control-label">小程序码</label>
                <div class="col-md-5">
                    <img src="{:__IMG($sunCodeUrl)}" width="100" height="100">
                    <a href="{$downSunCodeUrl}?auth_id={$mp_info.auth_id}" class="text-primary pl-15">下载太阳码</a>
                    
                </div>
            </div>

            <div class="form-heading">开发者信息</div>
            <div class="form-group">
                <label class="col-md-2 control-label">AppID</label>
                <div class="col-md-5">
                    <p class="form-control-static">{$base_info.authorizer_appid}</p>
                </div>
            </div>

            <div class="form-group">
                <label class="col-md-2 control-label"><span class="text-bright">*</span>AppSecret</label>
                <div class="col-md-5">
                    <input type="text" class="form-control" id="app_secret" name="app_secret"value="{$base_info.authorizer_secret}">
                 </div>
            </div>

            <div class="form-heading">运营情况</div>
            <div class="form-group">
                <label class="col-md-2 control-label">小程序商城</label>
                <div class="col-md-5">
                    <div class="switch-inline">
                        <input type="checkbox" name="is_mini_program" id="is_mini_program" {if $base_info.is_use==1}checked{/if}>
                        <label for="is_mini_program" class=""></label>
                    </div>
                </div>
            </div>
            <div class="form-group {if $base_info.is_use==1}hide{/if}" id="shop_close_reason">
                <label class="col-md-2 control-label">商城关闭原因</label>
                <div class="col-md-5">
                    <textarea class="form-control" rows="4" id="close_reason"></textarea>
                </div>
            </div>

            <div class="form-group">
                <label class="col-md-2 control-label"></label>
                <div class="col-md-8">
                    <button class="btn btn-primary save" type="submit">保存</button>
                    <a href="javascript:history.go(-1);" class="btn btn-default">返回</a>
                </div>
            </div>
        </form>
    </div>
    <div class="tab-pane fade tab-2" id="pay_info">
        <p class="small-muted form-control-static">需要使用微信支付的小程序（如电商类）必须配置微信支付，其他小程序可不配置。
            填写的微信支付商户号和小程序账号，必须是同一个主体、同一家公司</p>
        <form class="form-horizontal pt-15 form-validate-2 widthFixedForm">
            <div class="tab-content">

                <div role="tabpanel" class="tab-pane active" id="standard" >
                    <table class="table v-table table-auto-center">
                        <thead>
                        <tr>
                            <th>支付方式</th>
                            <th>状态</th>
                            <th class="col-md-2 pr-14 operationLeft">操作</th>
                        </tr>
                        </thead>
                        <tbody id="pay_list">

                        </tbody>
                    </table>
                </div>
                <div class="form-group"></div>
                <div class="form-group">
                    <label class="col-md-2 control-label"></label>
                </div>
            </div>

        </form>
    </div>
    <div class="tab-pane fade tab-3" id="tem_info">
        <ul class="nav nav-tabs v-nav-tabs" role="tablist">
            {volist name='template_list' id='vo' key='i'}
            <li role="presentation" class="{if $i == 1}active{/if}">
                <a href="#{$vo.html_id}" aria-controls="{$vo.html_id}" data-type="{$vo.html_id}" role="tab"
                   data-toggle="tab" class="flex-auto-center">{$vo.template_name}</a>
            </li>
            {/volist}
        </ul>
        <div class="tab-content pt-15">
            {volist name='template_list' id='vo' key='j'}
            <div role="tabpanel" class="tab-pane fade in {if $j == 1}active{/if}" id="{$vo.html_id}">
                <div class="tNews-container flex flex-pack-center">
                    <div class="tNews-view">
                        <div class="tNews-title">微商来商城</div>
                        <div class="view-main">
                            <div class="tNews-notice">
                                {volist name='vo.list' id='no'}
                                <h4 class="tNews-notice-title">{$no.notice_title}</h4>
                                <div class="tNews-notice-content fs-12">
                                    <p class="text-primary line-1-ellipsis pb-4">{$no.message}</p>
                                    <br/>
                                    {volist name='no.detail' id='de'}
                                    <p class="line-1-ellipsis pb-4">{$de}</p>
                                    {/volist}
                                    <p class="text-primary">{$no.foot}</p>
                                    <p class="text-primary">{$no.foot2}</p>
                                </div>
                                {/volist}
                                <div class="tNews-detail">详情 <span class="pull-right" style="padding-top: 2px"><i
                                        class="icon icon-right-arrow"></i></span></div>
                            </div>
                        </div>
                    </div>
                    <div class="custom-editor1 fs-12">
                        <div class="editor1-main" style="margin-top: 0px;">
                            <div class="editor1-arrow"></div>
                            <div class="editor1-inner">
                                <div class="form-editor1-title">使用场景：{$vo.editor_title}</div>
                                <div class="form-group">
                                    <div class="col-sm-2 control-label">模版标题</div>
                                    <div class="col-sm-10 mt-6">{$vo.template_title}</div>
                                </div>
                                <div class="form-group">
                                    <div class="col-sm-2 control-label">模版编号</div>
                                    <div class="col-sm-10 mt-6">{$vo.template_code}</div>
                                </div>
                                <div class="form-group">
                                    <div class="col-sm-2 control-label"><span class="text-bright">*</span>模版ID</div>
                                    <div class="col-sm-10">
                                        <input class="form-control input-sm diy-bind"
                                               id="mp_template_id_{$vo.template_id}" disabled
                                               {if $relation_list[$vo.template_id]}value="{$relation_list[$vo.template_id]['mp_template_id']}{/if}">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <div class="col-sm-2 control-label">状态</div>
                                    <div class="col-sm-10">
                                        <div class="switch-inline">
                                            <input type="checkbox" id="switch_{$vo.template_id}"
                                                   data-template-id="{$vo.template_id}"
                                                   class="J-switch"
                                                   {if $relation_list[$vo.template_id]}checked{/if}>
                                            <label for="switch_{$vo.template_id}" class=""></label>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            {/volist}
        </div>
    </div>
</div>
<input type="hidden" id="app_wx_appid" value="{$wx['appid']}">
<input type="hidden" id="app_wx_mch_key" value="{$wx['mch_key']}">
<input type="hidden" id="app_wx_mch_id" value="{$wx['mch_id']}">
{/block}
{block name="script"}
<script>
    require(['util'], function (util) {
        $('body').on('click', '#wxpay_is_use', function () {
            if($(this).is(':checked')){
                var wx_mch_id = $("#app_wx_mch_id").val();
                if(wx_mch_id){
                    util.alert('检测到商城已配置商户号为：'+wx_mch_id+'的微信支付信息，如小程序微信支付商户号与其一致，可直接同步配置信息。', function () {
                        $("#APP_KEY").val($("#app_wx_appid").val());
                        $("#MCH_KEY").val($("#app_wx_mch_key").val());
                        $("#MCHID").val($("#app_wx_mch_id").val());
                    })
                }
            }
        });
        $('body').on('click','.J-key',function(){
            var letters = 'abcdefghijklmnopqrstuvwxyz0123456789';
            var token = '';
            for(var i = 0; i < 32; i++) {
                var j = parseInt(Math.random() * (31 + 1));
                token += letters[j];
            }
            $('#MCH_KEY').val(token);
        })
        //微信支付
        $('body').on('click','.wPay_set',function(){
            var html = '<form class="form-horizontal padding-15" id="">';
            html += '<div class="form-group"><label class="col-md-3 control-label">是否启用</label><div class="col-md-8"><div class="switch-inline"><input type="checkbox" id="wxpay_is_use" ><label for="wxpay_is_use" class=""></label><p class="p small-muted">没有微信支付接口？<a class="text-primary" href="https://pay.weixin.qq.com/index.php/core/home/login?return_url=%2Findex.php%2Fcore%2Faccount" target="_blank">点击前往开通</a></p></div></div></div></div>';
            html += '<div class="form-group"><label class="col-md-3 control-label"><span class="text-bright">*</span>AppID</label><div class="col-md-8"><input type="text" class="form-control" id="APP_KEY" value=""></div></div>';
            html += '<div class="form-group"><label class="col-md-3 control-label"><span class="text-bright">*</span>MCHID</label><div class="col-md-8"><input type="text" class="form-control" id="MCHID" value=""></div></div>';
            html += '<div class="form-group"><label class="col-md-3 control-label"><span class="text-bright">*</span>API秘钥</label><div class="col-md-8"><div class="input-group"><input id="MCH_KEY" value=""  class="form-control" type="text"><span class="input-group-btn"><a class="btn btn-primary J-key" href="javascript:void(0);">生成秘钥</a></span></div><p class="help-block">如已有密钥，可直接粘贴至此输入框，如没有，可生成密钥然后填写至微信商户平台</p></div></div>';
            html += '</form>';
            loading();
            util.confirm('微信支付配置',html,function(){
                if(this.$content.find('#wxpay_is_use').is(':checked')){
                    var is_use =1;
                }
                var appkey = $("#APP_KEY").val();
                var MCHID = $("#MCHID").val();
                var MCH_KEY = $("#MCH_KEY").val();
                if(is_use){
                    if(appkey==''){
                        util.message('请填写应用ID[AppID]');
                        this.$content.find('#appkey').focus();
                        return false;
                    }
                    if(MCHID==''){
                        util.message('请填写微信支付商户号[MCHID]');
                        this.$content.find('#MCHID').focus();
                        return false;
                    }
                    if(MCH_KEY==''){
                        util.message('请填写微信支付Api秘钥');
                        this.$content.find('#MCH_KEY').focus();
                        return false;
                    }
                }
                $.ajax({
                    type:"post",
                    url:"{$payWxConfigMirUrl}",
                    data:{
                        'appkey':appkey,
                        'MCHID':MCHID,
                        'MCH_KEY':MCH_KEY,
                        'is_use' : is_use
                    },
                    async:true,
                    success:function (data) {
                        if (data["code"] > 0) {
                            util.message( data["message"],'success',loading());
                        }else{
                            util.message( data["message"],'danger');
                        }
                    }
                });
            })
        });
        //余额支付配置
        $('body').on('click','.bPay_set',function(){
            var html = '<form class="form-horizontal padding-15" id="">';
            html += '<div class="form-group"><label class="col-md-3 control-label">是否启用</label><div class="col-md-8"> <div class="switch-inline"><input type="checkbox" id="bpay_is_use" ><label for="bpay_is_use" class=""></label></div></div></div>';
            html += '</form>';
            loading('payment');
            util.confirm('余额支付配置',html,function(){
                if(this.$content.find('#bpay_is_use').is(':checked')){
                    var is_use =1;

                }
                $.ajax({
                    type:"post",
                    url:"{$payBConfigMirUrl}",//$payBConfigUrl
                    data:{
                        'is_use' : is_use
                    },
                    async:true,
                    success:function (data) {
                        if (data["code"] > 0) {
                            util.message( data["message"],'success',loading('payment'));
                        }else{
                            util.message( data["message"],'danger');
                        }
                    }
                });

            })
        })
        //货到付款支付配置
        $('body').on('click','.dPay_set',function(){
            var html = '<form class="form-horizontal padding-15" id="">';
            html += '<div class="form-group"><label class="col-md-3 control-label">是否启用</label><div class="col-md-8"> <div class="switch-inline"><input type="checkbox" id="dpay_is_use" ><label for="dpay_is_use" class=""></label></div></div></div>';
            html += '</form>';
            loading('payment');
            util.confirm('货到付款支付配置',html,function(){
                if(this.$content.find('#dpay_is_use').is(':checked')){
                    var is_use =1;
                }
                $.ajax({
                    type:"post",
                    url:"{$payDConfigMirUrl}",//$payDConfigUrl
                    data:{
                        'is_use' : is_use
                    },
                    async:true,
                    success:function (data) {
                        if (data["code"] > 0) {
                            util.message( data["message"],'success',loading('payment'));
                        }else{
                            util.message( data["message"],'danger');
                        }
                    }
                });

            })
        })
        //根据点击列表值修改支付方式是否启用
        $('#pay_list').on('click', '.payment_is_open', function(){
            var is_use = $(this).data('is_use');
            var id = $(this).data('id');
            $.ajax({
                type:"post",
                url:"{:__URL('PLATFORM_MAIN/config/updateConfigIsuse')}",
                data:{
                    'id' : id, 'is_use' : is_use
                },
                async:true,
                success:function (data) {
                    if (data["code"] > 0) {
                        util.message( data["message"],'success',loading('payment'));
                    }else{
                        util.message( data["message"],'danger');
                    }
                }
            })
        })
        // 开关小程序商城
       $("#is_mini_program").on("change",function(){
           if($(this).is(':checked')) {
               $(this).attr('checked', false);
               // console.log("{:__URL('PLATFORM_MAIN/system/getAccountType')}");return;
               //判断是否设置账号体系
               $.ajax({
                   'url':"{:__URL('PLATFORM_MAIN/system/getAccountType')}",
                   'type':'post',
                   'data':{},
                   success:function(data){
                       if(data.account_type === 0){
                           util.alert('商城还没有设置会员账号体系，请先设置好账号体系再开启商城。', function () {
                               window.open("{:__URL('PLATFORM_MAIN/system/accountSystem')}");
                               util.alert('是否已设置完成？', function(){
                                   $.ajax({
                                       'url':"{:__URL('PLATFORM_MAIN/system/getAccountType')}",
                                       'type':'post',
                                       'data':{},
                                       success:function(data){
                                           if(data.account_type === 0){
                                               $('#is_mini_program').attr('checked', false);
                                           }else{
                                               $('#is_mini_program').attr('checked', true);
                                               $("#shop_close_reason").addClass("hide");
                                           }
                                       }
                                   })
                               })
                           })
                       }else{
                           $('#is_mini_program').attr('checked', true);
                           $("#shop_close_reason").addClass("hide");
                       }
                   }

               })
           }else{
               $("#shop_close_reason").removeClass("hide");
           }
       });
        util.validate($('.form-validate-1'), function (form) {
            $.ajax({
                type: 'POST',
                dataType: 'json',
                url: '{$saveMiniProgramSettingUrl}',
                data: {
                    'is_mini_program': $("input[name='is_mini_program']").is(':checked')? 1 : 0,
                    'second_id': $('#category option:selected').val(),
                    'authorizer_secret': $("input[name='app_secret']").val() ,
                    'close_reason': $("#close_reason").val(),
                },
                success: function (data) {
                    if (data['code'] > 0) {
                        util.message(data["message"], 'success');
                    } else {
                        $("#is_mini_program").attr("checked","checked");
                        util.message(data["message"], 'danger');
                    }
                }
            });
        })
        loading();
        function loading(){
            $.ajax({
                type:"post",
                url : "{$payConfigMirUrl}",
                async : true,
                success : function(data) {
                        if(data['b_set']['is_use']==1){
                            $("#bpay_is_use").prop("checked", true);
                        }
                        if(data['d_set']['is_use']==1){
                            $("#dpay_is_use").prop("checked", true);
                        }
                        if(data['wx_set']['is_use']==1){
                            $("#wxpay_is_use").prop("checked", true);
                        }
                        $("#APP_KEY").val(data['wx_set']['value']['appid']);
                        $("#MCH_KEY").val(data['wx_set']['value']['mch_key']);
                        $("#MCHID").val(data['wx_set']['value']['mchid']);
                        var html = '';
                        for(var i = 0; i < data['pay_list'].length; i++){
                            html+='<tr>';
                            html+='<td>';
                            html+='<div class="media">';
                            html+='<div class="media-left">';
                            html+='<img src="'+data['pay_list'][i]['logo']+'">';
                            html+='</div>';
                            html+='<div class="media-body text-left">'+data['pay_list'][i]['pay_name'];
                            html+='<p class="p small-muted">'+data['pay_list'][i]['desc']+'</p>';
                            html+='</div>';
                            html+='</div>';
                            html+='</td>';
                            html+='<td>';
                            if(data['pay_list'][i]['is_use']==1){
                                html+='<span class="label label-success payment_is_open" data-id="'+data['pay_list'][i]['id']+'" data-is_use="0">开启</span>';
                            }else{
                                html+='<span class="label label-danger payment_is_open" data-id="'+data['pay_list'][i]['id']+'" data-is_use="1">关闭</span>';
                            }
                            html+='</td>';
                            html+='<td class="fs-0 operationLeft">';
                            if(data['pay_list'][i]['key']=='MPPAY'){
                                html+='<a href="javscript:void(0);" class="btn-operation wPay_set">配置</a>';
                            }
                            if(data['pay_list'][i]['key']=='BPAYMP'){
                                html+='<a href="javscript:void(0);" class="btn-operation bPay_set">配置</a>';
                            }
                            if(data['pay_list'][i]['key']=='DPAYMP'){
                                html+='<a href="javscript:void(0);" class="btn-operation dPay_set">配置</a>';
                            }
                            html += '</td>';
                            html += '</tr>';
                        }
                        $('#pay_list').html(html);


                }
            });
        }
        LoadingInfo();
        function LoadingInfo() {
            $.ajax({
                type: "post",
                url: "{$getMpSettingUrl}",
                success: function (data) {
                    $("#close_reason").val(data['close_reason']);
                }
            });
        }

        // 启用/取消模板消息
        $('#tem_info').on('change', '.J-switch', function () {
            var _this = $(this);
            var checked = $(this).prop('checked');
            // template_id 我们的模板id，mp_template_id小程序消息模板库的模板id
            var template_id = _this.data('template-id');
            if (checked) {
                $.ajax({
                    url: '{$addMtRelationUrl}',
                    type: 'POST',
                    data: {
                        'template_id': template_id
                    },
                    success: function (data) {
                        if (data.code > 0) {
                            $("#mp_template_id_" + template_id).val(data.data.mp_template_id);
                            util.message(data.message, 'success');
                        } else {
                            util.message(data.message);
                        }
                    }
                })
            } else {
                var mp_template_id = $("#mp_template_id_" + template_id).val();
                $.ajax({
                    url: '{$deleteMtRelationUrl}',
                    type: 'POST',
                    data: {
                        'mp_template_id': mp_template_id
                    },
                    success: function (data) {
                        if (data.code > 0) {
                            $("#mp_template_id_" + template_id).val('');
                            util.message(data.message, 'success');
                        } else {
                            util.message(data.message);
                        }
                    }
                })
            }
        })

        // 刷新基本信息
        $("#refresh_base").on("click", function () {
            $.ajax({
                type: 'GET',
                dataType: 'json',
                url:"{$getNewMpBaseInfoUrl}",
                success:function(result){
                    if (result['data'] == "") {
                        util.message("更新失败！", 'danger');return;
                    }
                    util.message(result.message, 'success');
                    window.location.reload();
                }});
        })
    })
</script>
{/block}
